<template>
  <div class="nav">
    <div class="container">
      <!-- logo -->
      <div class="logo">
        <span class="iconfont icon-gouwu"></span>        
      </div>
      <!-- 分类 -->
      <div class="category">
        <em @click="toCategory('水果')">水果</em>
        <em @click="toCategory('蔬菜')">蔬菜</em>
        <em @click="toCategory('禽畜肉蛋')">禽畜肉蛋</em>
        <em @click="toCategory('苗木花草')">苗木花草</em>
        <em @click="toCategory('农副加工')">农副加工</em>
        <em @click="toCategory('粮油米面')">粮油米面</em>
      </div>
      <!-- 搜索 -->
      <div class="search">
        <el-select placeholder="请选择" v-model="value" style="width:90px;">
          <el-option label="名称" value="1"></el-option>
          <el-option label="地区" value="2"></el-option>
        </el-select>
        <input placeholder="请输入搜索内容"/>
        <span class="el-icon-search"></span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value:'',
    }
  },
  methods: {
    // 去分类页
    toCategory(val){
      // 这种方式页面刷新会丢失数据
      // this.$router.push({name:'commonCategory',params:{value:val}})
      // 这样不会丢失数据，但是得在路由配置后面加/:value
      // this.$router.push({path:`/common/category/${val}`})
      // 这个最好
      // this.$router.push({path:'/common/category',query:{value:val}})
      // 上面都不行，由于Nav是公共组件的原因，所以如果用户在分类页点击的时候就没有效果
      this.$router.push({path:`/common/category`})
      // 搜索数据用在localStorage
      localStorage.setItem('categoryData',val)
    }
  },
  created() {
    
  },
  mounted() {
    
  },
}
</script>
<style lang="less" scoped>
.nav{
  width: 100%;
  height: 100px;
  line-height: 100px;
  // background-color: #ffeeef;
  overflow: hidden;
  .container{
    width: 1200px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    .logo{
      margin-right: 100px;
      span{
        font-size: 50px;
        color: #00e28b;
      }
    }
    .category{
      margin-right: 80px;
      em{
        font-size: 16px;
        margin-right: 30px;
        cursor: pointer;
        &:hover{
          color: #00e28b;
        }
      }
    }
    .search{
      // 选择
      /deep/ .el-select{

      }
      /deep/ .el-input__inner{
        border-radius: 0px !important;
      }
      // 输入框
      input{
        height: 40px;
        width: 342px;
        box-sizing: border-box;
        border: 1px solid #ddd;      
        margin-left: -1px;
        text-indent: 10px;
        // placeholder字体颜色
        &::-webkit-input-placeholder {
          color: #C0C4CC;
        }
        &::-moz-placeholder {
          color: #C0C4CC;
        }
        &:hover{
          border: 1px solid #C0C4CC;
        }
        &:hover+span{
          border: 1px solid #C0C4CC;
        }
        &:focus{
          outline: 0px;
          border: 1px solid #00e28b;
        }
        // 加号表示后面出现的第一个
        &:focus+span{
          border: 1px solid #00e28b;
        }
        // 所以这里这样写不行（现在效果也可以用，到时候可以用js写）
        // &:hover+.el-select{
        //   .el-input__inner{
        //     border-color: #C0C4CC;
        //   }
        // }
      }
      // 按钮
      >span{
        display: inline-block;
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background-color: #fff;
        box-sizing: border-box;
        border: 1px solid #ddd;
        margin-left: -1px;
        color: #C0C4CC;
        &:hover{
          border: 1px solid #00e28b;
          background-color: #00e28b;
          color: #fff;
        }
      }
    }
  }
}
</style>